<template>
    <el-container>

        <div class="container" id="container">
            <div class="form-container sign-up">
                <form>
                    <h1>注册</h1>
                    <el-form ref="form_register" class="form_register" :model="form_register" :rules="rules_register"
                        label-width="auto">

                        <el-form-item label="用户名" prop="username">
                            <el-input placeholder="请输入用户名/邮箱/ID" v-model="form_register.username" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input placeholder="请输入密码" v-model="form_register.password" autocomplete="new-password"
                                show-password></el-input>
                        </el-form-item>

                        <el-form-item label="确认密码" prop="password_again">
                            <el-input placeholder="请再次输入密码" v-model="form_register.password_again"
                                autocomplete="new-password" show-password></el-input>
                        </el-form-item>

                        <el-form-item>
                            <button class="button-position" @click.prevent="onRegister()">注册</button>
                        </el-form-item>

                    </el-form>
                </form>
            </div>
            <div class="form-container sign-in">
                <form>
                    <h1>登录</h1>
                    <el-form ref="form_login" :model="form_login" :rules="rules_login" class="form_login"
                        label-width="auto">

                        <el-form-item label="用户名" prop="username">
                            <el-input placeholder="请输入用户名/邮箱/ID" v-model="form_login.username" autocomplete="off"
                                clearable></el-input>
                        </el-form-item>

                        <el-form-item label="密码" prop="password">
                            <el-input placeholder="请输入密码" v-model="form_login.password" autocomplete="off"
                                show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <button class="button-position" @click.prevent="onLogin()">登录
                            </button>
                        </el-form-item>

                    </el-form>
                </form>
            </div>
            <div class="toggle-container">
                <div class="toggle">
                    <div class="toggle-panel toggle-left">
                        <h1>加入我们!</h1>
                        <p>巩固共和国医疗保险的坚强基石</p>
                        <button class="hidden" id="login" @click="toLogin()">前往登录</button>
                    </div>
                    <div class="toggle-panel toggle-right">
                        <h1>欢迎回来!</h1>
                        <p>打造共和国医疗保险的坚实支柱</p>
                        <button class="hidden" id="register" @click="toRegister()">前往注册</button>
                    </div>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script>
import _welcome from '@/webManage/js/welcome/welcome.js'
export default _welcome;
</script>

<style lang="less" scoped>
@import url("../style/login/login.css");

.el-container {
    font-family: 'Montserrat', sans-serif;

    background-color: #c9d6ff;
    background: linear-gradient(to right, #e2e2e2, #bbd4ce);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;

    .container {
        .button-position {
            position: absolute;
            right: -55px;
        }

        .sign-in {
            .form_login {
                height: 200px !important;
                width: 400px !important;
            }

            h1 {
                margin-bottom: 40px;
            }
        }

        .sign-up {
            .form_register {
                height: 200px !important;
                width: 400px !important;
            }

            h1 {
                margin-bottom: 40px;
            }
        }

        .el-form-item {
            line-height: 55px;
            margin-bottom: 15px;
        }
    }
}
</style>
